import { View, Text, Button, Image, Swiper, SwiperItem } from "@tarojs/components";
import Taro from '@tarojs/taro'
import React, { useState, useEffect } from 'react';
import { AtCountdown, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
import './moban_xq.scss'


const Mbban = () => {

        //放轮播图
        const b = [
                'https://jdc.jd.com/img/200',
                'https://jdc.jd.com/img/200',
                'https://jdc.jd.com/img/200'
        ]
        //轮播图
        const [img, setimg] = useState(b);

        const onTimeUp = () => {
                Taro.showToast({
                        title: '时间到,拼团结束',
                        icon: 'success',
                        duration: 2000
                })
        }

        // 定义弹出框的状态
        const [isOpened, SetMaodl] = useState(false)

        //弹出框的关闭，和打开
        const close = () => {
                SetMaodl(false)
        };
        const allow = () => {
                SetMaodl(false)
        };
        const on = () => {
                SetMaodl(true)
        };

        //跳转
        const to = (v) => {
                console.log(v)
                Taro.navigateTo({
                        url: v
                })
        }

        return (

                <>
                        <View className='lunbo'>
                                <Swiper indicatorColor='#999' indicatorActiveColor='#333' circular indicatorDots autoplay interval={2000} >
                                        <SwiperItem>
                                                <Image src={img[0]} />
                                        </SwiperItem>
                                        <SwiperItem>
                                                <Image src={img[1]} />
                                        </SwiperItem>
                                        <SwiperItem>
                                                <Image src={img[2]} />
                                        </SwiperItem>
                                </Swiper>
                        </View>

                        <View className='miaosu'>
                                <View>
                                        <View>3人成团</View>
                                        <View>精品泰国桂圆 <Text>1000g/盒</Text></View>
                                        <View><Text>￥7.8</Text><Text>￥14.6</Text></View>
                                </View>

                                <View>
                                        <View>
                                                <Text>已成5团/</Text>
                                                <Text>可成10团 /</Text>
                                                <Text>每人限购1份</Text>
                                        </View>
                                        <View>
                                                <Text>提货点：</Text>
                                                <Text>鲜丰水果</Text>
                                        </View>
                                </View>

                                <View>
                                        <View><AtCountdown isCard minutes={24} seconds={10} onTimeUp={onTimeUp} /></View>
                                        <View>下单2小时后</View>
                                </View>
                        </View>

                        <Button>商品说明</Button>

                        <View className='tupan'>
                                <Image src='https://jdc.jd.com/img/200'></Image>
                        </View>

                        <View className='wenzi'>
                                <Text>AFNCLEASNCOIEA;CINA;WNIWH;ANC;LEHA;LNC;LNEUAF;N</Text>
                        </View>

                        <View className='anniu'>
                                <Button onClick={on}>删除模板</Button>
                                <Button onClick={() => { to('/pages/Admin/addtemp') }}>编辑该模板</Button>
                        </View>

                        {/* 模态框 */}
                        <AtModal isOpened={isOpened}>
                                <AtModalHeader>提示信息</AtModalHeader>
                                <AtModalContent>

                                        <View className='modal'>
                                                <View>确定删除该模板吗</View>
                                        </View>

                                </AtModalContent>
                                <AtModalAction> <Button onClick={close}>拒绝</Button> <Button onClick={allow}>允许</Button> </AtModalAction>
                        </AtModal>

                </>
        )

}

export default Mbban